<template>
  <div v-if="profile !== null" class="bj">
    <div class="userinfo">
      <!-- :style="'background-image: url(' +profile.backgroundUrl + ')'" -->
      <div class="userinfo_top">
        <div class="userinfo_iconfont">
          <div
            class="left iconfont icon-xiazai6"
            @click="$router.go(-1)"
          ></div>
          <div class="item">
            <div class="right iconfont icon-sousuo1"></div>
          </div>
        </div>
      </div>
      <!-- 头像部分 -->
      <div class="userinfo_head">
        <div class="user_header">
          <img :src="profile.avatarUrl" />
        </div>
        <div class="userinfo_name">{{ profile.nickname }}</div>
        <div class="userinfo_text">
          <span>{{userFollowsLength}} 关注</span>
          <span>{{ getFolloweds.size }} 粉丝</span>
          <span>等级:{{ level }}</span>
        </div>
      </div>
      <!-- 功能 -->
      <div class="userinfo_fun">
        <router-link to="/base/recentPlay" tag="div" class="userinfo_box">
          <div class="iconfont icon-fenzu1"></div>
          <h6>最近播放</h6>
        </router-link>
        <div class="userinfo_box">
          <div class="iconfont icon-faxian_meirituijian"></div>
          <h6>每日推荐</h6>
        </div>
        <div class="userinfo_box">
          <div class="iconfont icon-yinlemusic215"></div>
          <h6>歌单</h6>
        </div>
        <div class="userinfo_box">
          <div class="iconfont icon-faxian_sirenFM"></div>
          <h6>私人FM</h6>
        </div>
        <router-link  tag="div" to="/base/collect" class="userinfo_box">
          <div class="iconfont icon-shoucang3"></div>
          <h6>收藏</h6>
        </router-link>
        <div class="userinfo_box">
          <div class="iconfont icon-yonghu2"></div>
           <h6>好友</h6>
        </div>
          <div class="userinfo_box">
          <div class="iconfont icon-shangchuanyunpan"></div>
           <h6>我的播客</h6>
        </div>
          <div class="userinfo_box">
          <div class="iconfont icon-xinhao"></div>
           <h6>上传</h6>
        </div>
      </div>

      <!-- 喜欢的音乐 -->
      <div class="userinfo_music">
        <router-link tag="div" to="/base/likeMusic" class="userinfo_like">
          <div class="userinfo_img">
            <img
              src="https://img0.baidu.com/it/u=3858370262,1461349391&fm=26&fmt=auto"
              alt=""
            />
          </div>
          <span class="likemusic iconfont icon-xihuan-copy"></span>
        </router-link>
        <div class="userinfo_mtext">
          <div class="userinfo_mylike">我喜欢的音乐</div>
          <div class="userinfo_num">395首</div>
        </div>
      </div>

      <!-- 退出登录 -->
      <!-- <div class="userinfo_logOut">退出登录</div> -->

      <!-- 创建歌单 -->
      <van-tabs v-model="active">
        <van-tab title="创建歌单">
          <router-link
            tag="div"
            class="userinfoIsts"
            v-for="(item, index) in playlist"
            :key="item.id"
            :to="'/recommend/recommendlist?id=' + item.id"
          >
            <div class="userinfoIstsImg">
              <!-- 歌曲头像 -->
              <img :src="item.coverImgUrl" alt="" />
            </div>
            <div class="userinfoIstsName">
              <p>{{ item.name }}</p>
              <p>{{ playLists[index] }}首</p>
            </div>
          </router-link>
        </van-tab>

        <van-tab title="收藏歌单">
          <router-link
            tag="div"
            class="userinfoIsts"
            v-for="(item, index) in musikCube"
            :key="item.id"
            :to="'/recommend/recommendlist?id=' + item.id"
          >
            <div class="userinfoIstsImg">
              <!-- 歌曲头像 -->
              <img :src="item.coverImgUrl" alt="" />
            </div>
            <div class="userinfoIstsName">
              <p>{{ item.name }}</p>
              <p>{{ musicCanto[index] }}首</p>
            </div>
          </router-link>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import {
  getDetail,
  getSubcount,
  getUserFollows, //获取粉丝列表
  getUserFolloweds, // 获取用户关注列表
  getLikelist, //喜欢的音乐列表
  getSongDetail, //获取歌曲详情
  getUserPlaylist, //获取用户歌单
  getPlaylistDetail, ////获取歌单详情
} from "../api/user";
export default {
  data() {
    return {
      active: 2,
      profile: null, //账号信息
      uid: "", //账号uid
      level: null, //等级,
      getRecord: null, //最近播放

      userFollows: [], //个人关注的歌手
      userFollowsLength: 0, //关注歌手的个数
      followeds: [], //粉丝
      followedsLength: 0, //粉丝数量
      isLikelist: [], //喜欢的音乐
      likelist: 0, //喜欢的音乐数量
      userPlaylist: [], //收藏的歌单
      playlist: [], //创建歌单
      playLists: [], //创建歌单的数据
      musikCube: [], //收藏歌单
      musicCanto: [], //收藏歌单的数据
      picUrl: "", //歌曲图片,
      getFolloweds: [],
    };
  },
  methods: {
    //获取用户详情
    getDetailFun() {
      getDetail({ uid: window.localStorage.uid }).then((data) => {
        console.log(data);
        console.log(data.level);
        this.level = data.level;
        this.profile = data.profile;
        console.log(this.profile);
        console.log(this.profile.backgroundUrl); //背景图
        console.log(this.profile.nickname); //名字
        console.log(window.localStorage.uid); //id
      });
    },
    //获取用户信息 , 歌单，收藏，mv, dj 数量
    getSubcountFun() {
      getSubcount({ uid: window.localStorage.uid }).then((data) => {
        console.log(data);
      });
    },
  },

  created() {
    //页面加载完成后调用
    this.getDetailFun(); //获取用户详情
    this.getSubcountFun(); //获取用户信息 , 歌单，收藏，mv, dj 数量
    //  this.getRecordFun(); //最近播放

    //喜欢的音乐列表
    getLikelist({ uid: window.localStorage.uid }).then((data) => {
      // console.log(data);
      this.isLikelist = data.ids;
      this.likelist = data.ids.length;
      let like = this.isLikelist.splice(0, 1);
      // console.log(like);
      getSongDetail({ ids: like[0] }).then((data) => {
        this.picUrl = data.songs[0].al.picUrl;
        // console.log(this.picUrl);
      });
    });

    //获取用户歌单
    getUserPlaylist({ uid: window.localStorage.uid }).then((data) => {
      // console.log(data);
      this.userPlaylist = data.playlist;
      let playlist = this.userPlaylist.splice(1, 6);
      this.playlist = playlist;
      // console.log(data.playlist.id);
      this.playlist.forEach((item) => {
        //获取创建歌单详情
        getPlaylistDetail({ id: item.id }).then((data) => {
          this.playLists.push(data.privileges.length);
        });
      });

      let musikCube = this.userPlaylist.splice(7);
      this.musikCube = musikCube;
      // console.log(this.musikCube);
      this.musikCube.forEach((item) => {
        //获取收藏歌单详情
        getPlaylistDetail({ id: item.id }).then((data) => {
          // console.log(data.privileges.length);
          this.musicCanto.push(data.privileges.length);
          // let conto.push(data.privileges.length)
        });
      });

      // 获取用户关注列表
      getUserFollows({ uid: window.localStorage.uid }).then((data) => {
        console.log("列表",data.follow);
        this.userFollows = data.follow;
        this.userFollowsLength = data.follow.length;
      });

      //获取粉丝
      getUserFolloweds({ uid: window.localStorage.uid }).then((data) => {
        console.log("粉丝", data);
        this.getFolloweds = data;
      });
    });
  },
  updated() {
    this.$emit("user-floows", [this.userFollows, this.followeds]);
  },
};
</script>

<style lang="less">
.userinfo {
  .userinfo_top {
    width: 100%;
    z-index: 8;
    // border: 1px solid blue;
    .userinfo_iconfont {
      margin: 0 auto;
      width: 90%;
      display: flex;
      padding-top: 10px;
      flex: 1;
      justify-content: space-between;
      text-align: center;
      z-index: 5;
      .left {
        font-size: 18px;
        z-index: 88;
      }
      .right {
        font-size: 18px;
      }
    }
  }
  .userinfo_head {
    margin: 0 auto;
    width: 90%;
    height: 100px;
    // border: 1px solid red;
    //  background-color: rgba(260, 260, 260 );
  background-color: rgb(248, 248, 248);

    border-radius: 15px;
    margin-top: 50px;
    z-index: 5;
    position: relative;
    .user_header {
      width: 60px;
      height: 60px;
      // border: 1px solid red;
      border-radius: 50%;
      position: absolute;
      top: -30px;
      left: 42%;
      background-size: cover;
      img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
      }
    }
    .userinfo_name {
      font-weight: bold;
      text-align: center;
      padding-top: 40px;
    }
    .userinfo_text {
      display: flex;
      justify-content: space-evenly;
      margin: 0 auto;
      width: 40%;
      font-size: 9px;
      color: rgb(152, 153, 152);
      text-align: center;
      color: rgb(152, 153, 152);
      padding-left: 5px;
    }
  }
  .userinfo_fun {
    margin: 0 auto;
    width: 90%;
    height: 200px;
    // border: 1px solid red;
    // font-size: 10px;
    // display: flex;
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    z-index: 999;
    // justify-content: space-around;
    align-content: space-around;
    background-color: rgb(260, 260, 260);
    border-radius: 15px;
    .userinfo_box {
      z-index: 999;

      text-align: center;
      // padding-top: 5px;
      width: 25%;
    }
    .iconfont {
      font-size: 25px;
      padding-bottom: 8px;
      color: rgb(201, 75, 61);
    }
  }
  // 喜欢音乐模块
  .userinfo_music {
    width: 90%;
    height: 90px;
    // border: 1px solid red;
    margin: 0 auto;
    margin-top: 15px;
    background-color: rgb(260, 260, 260);
    border-radius: 15px;
    z-index: 5;
    display: flex;
    .userinfo_like {
      width: 50px;
      height: 50px;
      border-radius: 10px;
      position: relative;
      padding-top: 20px;
      padding-left: 15px;
      z-index: 999;
      // border: 1px solid red;
      .userinfo_img img {
        width: 50px;
        height: 50px;
        border-radius: 10px;
      }
      .likemusic {
        font-size: 20px;
        color: white;
        position: absolute;
        top: 35px;
        left: 29px;
      }
    }
    .userinfo_mtext {
      width: 50%;
      height: 50px;
      // border: 1px solid red;
      margin-top: 23px;
      margin-left: 25px;
      z-index: 99;
      .userinfo_mylike {
        z-index: 99;
        font-weight: bold;
      }
      .userinfo_num {
        font-size: 12px;
        color: rgb(159, 159, 159);
        padding-top: 3px;
        z-index: 99;
      }
    }
  }
  .userinfo_logOut {
    width: 90%;
    height: 50px;
    border: 1px solid;
    margin: 0 auto;
    margin-top: 20px;
    text-align: center;
    line-height: 50px;
    border-radius: 15px;
    background-color: rgb(201, 75, 61);
    color: white;
    z-index: 99;
  }
  .van-tabs {
    margin: 0 14px;
    // background-color: #fff;
  background-color: rgb(248, 248, 248);

    // border-radius: 14px;
    .userinfoIsts {
      margin: 16px 11px;
      background-color: #fff;
      border-radius: 14px;
      height: 52px;
      padding: 14px;
      display: flex;
      .userinfoIstsImg {
        width: 52px;
        height: 52px;
        // background-color: red;
        border-radius: 14px;
        margin-right: 8px;
        img {
          width: 100%;
          height: 100%;
          border-radius: 14px;
        }
      }
      .userinfoIstsName {
        width: 100% - 20px;
        margin-top: 8px;
        p:nth-child(2) {
          margin-top: 3px;
          font-size: 10px;
          color: #ababab;
        }
      }
    }
  }
}

</style>